import {useEffect} from 'react';
import moment from "moment";
import {connect} from 'react-redux';
import {View} from '@tarojs/components';
import {AtIcon, AtTabs, AtTabsPane} from 'taro-ui';
import {Empty} from '@nutui/nutui-react-taro';

import './index.scss'

function Recharge(props) {
  const {dispatch, tradeList, current} = props;
  useEffect(() => {
    dispatch({
      type: 'recharge/init'
    })
  }, [dispatch]);
  function changeCurrent(val){
    dispatch({
      type: 'recharge/setState',
      payload: {
        current: val
      }
    })
  }
  function getTypeStr (type){
    switch (type){
      case 1:
        return '充值';
      case 2:
        return '提现';
      case 3:
        return '消费';
      case 4:
        return '退款';
      default:
        return ''
    }
  }
  function day2weekday(timeStr){
    const weekDay = moment(timeStr).format('d');
    switch (weekDay) {
      case "1":
        return <span>{moment(timeStr).format('YYYY-MM-DD')}&nbsp;&nbsp;&nbsp;&nbsp;星期一</span>;
      case "2":
        return <span>{moment(timeStr).format('YYYY-MM-DD')}&nbsp;&nbsp;&nbsp;&nbsp;星期二</span>;
      case "3":
        return <span>{moment(timeStr).format('YYYY-MM-DD')}&nbsp;&nbsp;&nbsp;&nbsp;星期三</span>;
      case "4":
        return <span>{moment(timeStr).format('YYYY-MM-DD')}&nbsp;&nbsp;&nbsp;&nbsp;星期四</span>;
      case "5":
        return <span>{moment(timeStr).format('YYYY-MM-DD')}&nbsp;&nbsp;&nbsp;&nbsp;星期五</span>;
      case "6":
        return <span>{moment(timeStr).format('YYYY-MM-DD')}&nbsp;&nbsp;&nbsp;&nbsp;星期六</span>;
      case "0":
        return <span>{moment(timeStr).format('YYYY-MM-DD')}&nbsp;&nbsp;&nbsp;&nbsp;星期日</span>;
      default:
        return ''
    }
  }
  function tradeCard(i, index) {
    const {
      operationType = '',
      createTime = '',
      tradingBalance = '',
    } = i;
    return (
      <View className='cardWrap' key={index}>
        <View className='cardTitle'>
          {/*<AtIcon prefixClass='icon' value='qianbao' size={16} color='#ff9000' />*/}
          {/*<View>{getTypeStr(type)}</View>*/}
          <View>{day2weekday(createTime)}</View>
        </View>
        <View className='textLine'>
          <View>
            <AtIcon prefixClass='icon' value='qianbao' size={38} color='#ff9000' />
          </View>
          <View>
            <View className='type'>{getTypeStr(operationType)}</View>
            <View>{moment(createTime).format('YYYY-MM-DD HH:mm:ss')}</View>
          </View>
          <View className='money' style={{color: operationType === 1 ? '#1a9d34' : '#ff5151'}}>
            {operationType === 1 ? '+' : '-'}{tradingBalance}
          </View>
        </View>
      </View>
    )
  }

  const tabList = [{title: '全部记录'}, {title: '充值'}, {title: '退款'}, {title: '消费'}]
  return (
    <View>
      <AtTabs current={current} tabList={tabList} onClick={(val) => changeCurrent(val)}>
        <AtTabsPane current={current} index={0} className='rechargeWrap'>
          <View>
            {
              tradeList && tradeList.length ? tradeList.map((i, index) => tradeCard(i, index)) :
                  <Empty style={{backgroundColor: 'transparent', paddingTop: '100rpx'}} />
            }
          </View>
        </AtTabsPane>
        <AtTabsPane current={current} index={1} className='rechargeWrap'>
          <View>
            {
              tradeList && tradeList.length && tradeList.filter((l) => l.operationType === 1).length ?
                tradeList.filter((l) => l.operationType === 1).map((i, index) => tradeCard(i, index)) :
                  <Empty style={{backgroundColor: 'transparent', paddingTop: '100rpx'}} />
            }
          </View>
        </AtTabsPane>
        <AtTabsPane current={current} index={2} className='rechargeWrap'>
          <View>
            {
              tradeList && tradeList.length && tradeList.filter((l) => l.operationType === 4).length ?
                tradeList.filter((l) => l.operationType === 4).map((i, index) => tradeCard(i, index)) :
                  <Empty style={{backgroundColor: 'transparent', paddingTop: '100rpx'}} />
            }
          </View>
        </AtTabsPane>
        <AtTabsPane current={current} index={3} className='rechargeWrap'>
          <View>
            {
              tradeList && tradeList.length && tradeList.filter((l) => l.operationType === 3).length ?
                tradeList.filter((l) => l.operationType === 3).map((i, index) => tradeCard(i, index)) :
                  <Empty style={{backgroundColor: 'transparent', paddingTop: '100rpx'}} />
            }
          </View>
        </AtTabsPane>
      </AtTabs>
    </View>
  )
}

export default connect(({recharge}) => {
  return {...recharge}
})(Recharge)
